<!doctype html>
<html lang="en" data-framework="dojo">
	<head>
		<meta charset="utf-8">
		<title>Dojo • TodoMVC</title>
		<style>
			[hidden="true"] {
				display: none;
			}
		</style>
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	</head>
	<body>
		<script type="dojo/require">
			at: 'dojox/mvc/at'
		</script>
		<script id="item-template" type="dojox/mvc/InlineTemplate">
			<li>
				<div class="view">
					<input class="toggle" type="checkbox" data-dojo-type="dojox/mvc/Element" data-dojo-props="checked: at('rel:', 'completed')" data-dojo-attach-event="change: toggleCompleted">
					<label data-dojo-type="dojox/mvc/Element" data-dojo-props="innerText: at('rel:', 'title')" data-dojo-attach-event="dblclick: editTodo"></label>
					<button class="destroy" data-dojo-attach-event="click: removeTodo"></button>
				</div>
				<form data-dojo-attach-event="submit: saveEdits">
					<input class="edit" data-dojo-type="dojox/mvc/Element" data-dojo-mixins="todo/widgets/TodoEscape,todo/widgets/TodoFocus" data-dojo-props="_setDisabledAttr: 'domNode', value: at('rel:', 'title'), shouldGetFocus: at('rel:', 'isEditing'), disabled: at('rel:todosCtrl', 'saving')" data-dojo-attach-event="blur: invokeSaveEdits, escape: revertEdits">
				</form>
			</li>
		</script>
		<section class="todoapp" data-dojo-type="todo/widgets/Todos">
			<script type="dojox/mvc/InlineTemplate">
				<section>
					<header class="header">
						<h1>todos</h1>
						<form class="todo-form" data-dojo-attach-event="submit: addTodo">
							<input class="new-todo" placeholder="What needs to be done?" data-dojo-type="dojox/mvc/Element" data-dojo-mixins="todo/widgets/TodoEnter" data-dojo-props="_setDisabledAttr: 'domNode', value: at(this, 'newTodo'), disabled: at(this, 'saving')" autofocus>
						</form>
					</header>
					<section class="main" data-dojo-type="dijit/_WidgetBase" data-dojo-props="_setHiddenAttr: '', hidden: at(this.get('todos'), 'length').transform(this.emptyConverter)">
						<input id="toggle-all" class="toggle-all" type="checkbox" data-dojo-type="dojox/mvc/Element" data-dojo-props="checked: at(this, 'areAllChecked')" data-dojo-attach-event="change: markAll">
						<label for="toggle-all">Mark all as complete</label>
						<ul class="todo-list"
						 data-dojo-type="dojox/mvc/WidgetList"
						 data-dojo-props="todosWidget: this, children: at(this, 'filteredTodos'), partialRebuild: true, templateString: require('dojo/dom').byId('item-template').innerHTML"
						 data-mvc-child-type="todo/widgets/Todo"
						 data-mvc-child-mixins="todo/widgets/CSSToggleWidget"
						 data-mvc-child-props="todosWidget: this.parent.todosWidget, _setCompletedAttr: {type: 'classExists'}, _setIsEditingAttr: {type: 'classExists', className: 'editing'}, completed: at(this.target, 'completed'), isEditing: at(this.target, 'isEditing')">
					</section>
					<footer class="footer" data-dojo-type="dijit/_WidgetBase" data-dojo-props="_setHiddenAttr: '', hidden: at(this.get('todos'), 'length').transform(this.emptyConverter)">
						<span class="todo-count"><strong data-dojo-type="dojox/mvc/Element" data-dojo-props="innerText: at(this, 'remainingCount')"></strong>
							<span data-dojo-type="dojox/mvc/Element" data-dojo-props="innerText: at(this, 'remainingCount').transform(this.pluralizeConverter), one: 'item left', other: 'items left'"></span>
						</span>
						<ul class="filters">
							<li>
								<a data-dojo-type="todo/widgets/CSSToggleWidget" data-dojo-props="_setSelectedAttr: {type: 'classExists'}, selected: at(this, 'status').transform(this.statusConverter), statusForElem: ''" href="#/">All</a>
							</li>
							<li>
								<a data-dojo-type="todo/widgets/CSSToggleWidget" data-dojo-props="_setSelectedAttr: {type: 'classExists'}, selected: at(this, 'status').transform(this.statusConverter), statusForElem: 'active'" href="#/active">Active</a>
							</li>
							<li>
								<a data-dojo-type="todo/widgets/CSSToggleWidget" data-dojo-props="_setSelectedAttr: {type: 'classExists'}, selected: at(this, 'status').transform(this.statusConverter), statusForElem: 'completed'" href="#/completed">Completed</a>
							</li>
						</ul>
						<button class="clear-completed" data-dojo-type="dijit/_WidgetBase" data-dojo-attach-event="click: clearCompletedTodos" data-dojo-props="_setHiddenAttr: '', hidden: at(this, 'completedCount').transform(this.emptyConverter)">Clear completed</button>
					</footer>
				</section>
			</script>
		</section>
		<footer class="info">
			<p>Double-click to edit a todo</p>
			<p>Credits:
				<a href="http://jamesthom.as/">James Thomas</a>,
				<a href="https://github.com/edchat">Ed Chatelain</a> and
				<a href="https://github.com/asudoh">Akira Sudoh</a>
			</p>
			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>
		<script src="node_modules/todomvc-common/base.js"></script>
		<script src="js/main.js"></script>
		<script src="js/lib/dojo/dojo.js"></script>
		<!-- Use below instead of above line to use non-built version of Dojo components. -->
		<!-- <script src="node_modules/dojo/dojo.js"></script> -->
	</body>
</html>
